/**
  普通话等级考试-学生报名统计
*/
<template>
  <div>
    <div id="boxId" class="student-regist-container">
      <div style="height: 30px;" class="titleclass">
        <el-breadcrumb style="float: left;" separator="/">
          <el-breadcrumb-item v-if="tips==1" :to="{ path: '/putonghuaExamsCreate' }">
            <span @click="reback()">{{ $t('mandarin.createExams') }}</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="tips==2" :to="{ path: '/computerRegisterInfo' }">
            <span @click="reback()">报名信息</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="tips==1">{{ $t('mandarin.stuRegistStatistics') }}</el-breadcrumb-item>
          <el-breadcrumb-item>查看准考证</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button style="float:right; padding:0;" type="text" @click="reback()">{{ $t('common.btn.back') }}</el-button>
      </div>
      <div class="conDiv clearfix">
        <div class="divclasss fl">
          <h3>{{objetails.examName}}</h3>
          <h4>准考证</h4>
          <ul>
            <li class="clearfix"><span class="spanfl fl">准考证号：</span><span :title="this.objetails.examCardNo" class="pclass fl">{{objetails.examCardNo}}</span></li>
            <li class="clearfix"><span class="spanfl fl">考生姓名：</span><span class="pclass fl">{{objetails.studentName}}</span></li>
            <li class="clearfix"><span class="spanfl fl"><span class="fl ml">学</span><span class="fr">号：</span></span><span class="pclass fl">{{objetails.studentId}}</span></li>
            <li class="clearfix"><span class="spanfl fl">证件号码：</span><span class="pclass fl">{{objetails.idCardNo}}</span></li>
            <li class="clearfix position"><span class="spanfl fl">考试地址：</span><span class="pclass fl">{{objetails.address}}</span><span class="fr zuori">第 {{objetails.seatNo}} 座位</span><span class="fr zuole">第 {{objetails.classNo}} 考场</span></li>
            <li class="clearfix"><span class="spanfl fl">考试时间：</span><span class="pclass fl">{{objetails.examTime}}</span></li>
            <li class="clearfix"><span class="spanfl fl">学校名称：</span><span class="pclass fl">同济大学</span></li>
            <li class="clearfix"><span class="spanfl fl">学院系别：</span><span class="pclass fl">{{objetails.college}}</span></li>
            <li class="clearfix"><span class="spanfl fl">级别科目：</span><span class="pclass fl">{{objetails.examSubject}}</span></li>
            <li class="clearfix"><span class="spanfl fl"><span class="fl ml">备</span><span class="fr">注：</span></span><span class="pclass lilater fl"></span></li>
            <img  class="imgclass" :src="imageUrl">
          </ul>
          <div class="lineclass"></div>
          <div class="divclasss frclass fr">
          <h4 class="pfr">考试注意事项</h4>
              <Tinymce class="pfrfont" ref="editor" :height="300" :simple="false" :hideMenu="true" v-html="objetails.remark" :toolbar="toolbar" />
          </div>
        </div>
         <!-- 文本编辑器 -->
        <!-- <div class="divclasss frclass fr">
          <h4 class="pfr">考试注意事项</h4>
            <Tinymce class="pfrfont" ref="editor" :height="300" :simple="false" :hideMenu="true" v-html="objetails.remark" :toolbar="toolbar" />
        </div> -->

      </div>
      <div class="operate-btn-container">
          <div class="float-right">
            <el-button type="primary" @click="print()">打印</el-button>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import Tinymce from 'common/src/components/tinymce';
import subjectCompetitionApi from 'common/src/api/subjectCompetition/subjectCompetition';
import { downloadimage } from 'common/src/api/upload'
export default {
  props: {
    signUpId: {
      type: Object,
      default() {
        return {};
      }
    },
  },
  components: {
    Tinymce
  },
  data() {
    return {
      objetails:{

      },
      imageUrl:''
    }
  },
  filters: {
    status(val) {
      switch (val) {
        case 0:
          return '已报名'
        case 1:
          return '报名结束'
        default:
          return val
      }
    }
  },
  created() {
    this.PrintingDetails();
  },
  methods: {
    PrintingDetails() {
      let data={
        signUpId:this.signUpId.id
      }
      subjectCompetitionApi.printingDetails(data).then(res => {
        if (res.code == 200) {
          this.objetails = res.data;
          //this.objetails.obs="face/file/20210917093853134867.jpg"
          //res.data.obs="face/file/20210917093853134867.jpg";
          if(res.data.obs){
              downloadimage(res.data.obs).then(resT => {
                this.imageUrl=resT.data.base;
              })
          }
        }else if(res.code == 300){
            this.$message({
              type: "waring",
              message: res.data.msg
            });
        }
      }).then(() => {
      });
    },
    reback() {
      this.$emit('change-exam-create-index')
    },
    print() {

      let bdhtml = document.getElementById('boxId').innerHTML;
      var iframe = document.createElement('IFRAME');
      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
      document.body.appendChild(iframe);
      var doc = iframe.contentWindow.document;
      var ys = "@page{size:auto A4 langscape;margin:3mm;}html,body{height:auto;-webkit-print-color-adjust: exact;-moz-print-color-adjust: exact;-ms-print-color-adjust: exact;}img{max-width:100%;max-height:100%;margin:0 auto}button,.titleclass,.title{display:none}conDiv{position: relative;padding: 20px;box-sizing: border-box;background: #fff;margin-bottom: 10px}ul{padding: 0;margin: 0;position: relative;}ul li {list-style: none;line-height: 36px;}.fl {float: left}.fr {float: right;}.clearfix:after{display: block;clear: both;content: '';visibility:hidden;}.divclasss {position: relative;width: 100%;box-sizing: border-box;}h3,h4 {width: 100%;text-align: center;}.spanfl {display: inline-block;width: 80px;text-align: right;}.pclass {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.frclass {width: 100%;padding: 10px;box-sizing: border-box;overflow-y:auto;line-height: 20px;letter-spacing:2px;}.lineclass {width: 100%;height: 1px;border-bottom: 1px dashed #000;margin: 20px 0 20px 0;}.imgclass{width: 100px;height: 120px;position: absolute;right: 19px;top: 10px;}.pfr{text-align: center;margin-bottom: 20px;line-height: 4px;}.pfrfont{text-align: left;}.lilater{white-space: inherit;word-wrap: break-word;word-break: normal;}.position{position: relative;}.zuori{position: absolute;top: 23px;right: 40px;}.zuole{position: absolute;top: 0px;right: 40px;}";

      doc.write(bdhtml);
      doc.close();
      var style = document.createElement("style");
      style.innerText = ys;
      doc.getElementsByTagName("head")[0].appendChild(style)
      iframe.contentWindow.focus();
      iframe.contentWindow.print();


    }
  },
  watch: {

  }
}
</script>
<style lang="scss" scoped>
.el-card {
    padding-bottom: 10px;
}
.lineClass {
    display: inline-block;
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #000;
    margin: 0 0 20px 0;
}
.examination {
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    width: 100%;
    text-align: center;
    margin: 0 0 20px 0;
}
.operate-btn-container {
    margin-top: 30px;
    background: #fff;
}
.content {
    position: relative;
}
.imgClass {
    position: absolute;
    width: 110px;
    height: 140px;
    top: 10px;
    right: 10px;
    border: 1px solid #000;
}
</style>
<style scoped>
@page{
  size:auto A4 langscape;
  margin:3mm;
}
body{
  -webkit-print-color-adjust: exact;
  -moz-print-color-adjust: exact;
  -ms-print-color-adjust: exact;
}
.conDiv {
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 10px;
}
ul {
    padding: 0;
    margin: 0;
    position: relative;
}
ul li {
    list-style: none;
    line-height: 36px;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.clearfix:after{
    display: block;
    clear: both;
    content: '';
    visibility:hidden;
}
.divclasss {
  position: relative;
  width: 100%;
  /* min-height: 400px; */
  box-sizing: border-box;
}
h3,
h4 {
    width: 100%;
    text-align: center;
}
.spanfl {
    display: inline-block;
    width: 80px;
    text-align: right;
}
.ml{
  margin-left: 10px;
}
.pclass {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lilater{
  white-space: inherit;
  word-wrap: break-word;
  word-break: normal;
}
.frclass {
    width: 100%;
    padding: 10px;
    /* border: 1px solid #000; */
    box-sizing: border-box;
    /* max-height: 300px; */
    overflow-y:auto;
    line-height: 20px;
    letter-spacing:2px;
}
.pfr{
  text-align: center;
  margin-bottom: 20px;
  line-height: 4px;
}
.pfrfont{
  text-align: left;
}
.lineclass {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #000;
  margin: 20px 0 20px 0;
}
.imgclass{
  width: 100px;
  height: 120px;
  position: absolute;
  right: 19px;
  top: 10px;
}
.position{
  position: relative;
}
.zuori{
  position: absolute;
  top: 23px;
  right: 40px;
}
.zuole{
  position: absolute;
  top: 0px;
  right: 40px
}
</style>

